<template>
  <div class="container">
    <van-form validate-trigger="onSubmit" :show-error-message="false" @submit="onSubmit" @failed="onFailed">
      <van-field v-model="userName" autocomplete="off" name="userName" placeholder="用户名(随意填)" :rules="[{ required: true, message: '用户名不能为空' }]" />
      <van-field v-model="password" type="password" name="password" placeholder="密码(随意填)" :rules="[{ required: true, message: '密码不能为空' }]" />
      <van-button round block native-type="submit">登 录</van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    //账号密码登录
    async onSubmit() {
      const redirectPath = this.$route.query.redirect || '/home'
      this.$router.replace(redirectPath).catch(() => {})
    },
    //账号密码表单校验失败时弹窗提示
    onFailed(errorInfo) {
      this.$toast(errorInfo.errors.map(item => item.message).join(`\n`))
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  position: relative;
  background: url('~@/assets/images/login.jpg') center center no-repeat;
  background-size: cover;
  padding: 220px 20px 100px;

  .van-form {
    padding-top: 60px;
    .van-cell {
      background: #f7f7f7;
      border-radius: 55px;
      margin-top: 30px;
      line-height: 70px;
      padding: 20px 40px;
      &::after {
        border: none;
      }
    }
    .van-button {
      margin-top: 80px;
      height: 110px;
      font-size: 42px;
      color: #fff;
      background: linear-gradient(to right, #3f9dfd, #1eb6f6);
      border: none;
    }
  }
}
</style>
